<template>
  <div>
    <div class="head">
      <a @click="$router.go(-1)" class="return"></a>
      {{$t('record.v1')}}
    </div>
    <div class="overlay">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' ' :loosing-text="$t('record.v9')" :loading-text="$t('record.v8')">
				<van-list v-model="loading" :finished="finished" :finished-text="$t('record.v2')"  :loading-text="$t('record.v8')" @load="onLoad">
          <div class="recordWrap">
            <div class="recordItem" v-for="(item,index) in list" :key="index" @click="contain(item)">
              <van-row class="tit">
                <!-- <van-col span="24">{{ item.createTime | dateFormat }}</van-col> -->
                <van-col span="19">{{ item.createTime | dateFormat }}</van-col>
                <van-col span="5" :class='[item.status==1?"class1":"class2"]'>{{item.status ==1 ? $t('record.v3') : $t('record.v4')}}</van-col>
              </van-row>
              <van-row class="title">
                <van-col span="12">
                  <p>{{$t('record.v5')}}</p>
                  <!-- {{item.storageCoinId ==1?'EXUU':'USDT'}} -->
                  <p>{{item.storageNumConvertPlatform.toFixed(4)}}&nbsp;EXUU</p>
                </van-col>
                <van-col span="12">
                  <p>{{$t('record.v6')}}</p>
                  <!-- {{item.storageCoinId ==1?'EXUU':'USDT'}} -->
                  <p>{{(item.earningsRatio*100).toFixed(2)+'%'}}</p>
                </van-col>
                <!-- <van-col span="10">
                  <p>获得收益</p>
                  <p>{{item.earningsNum.toFixed(4)}}&nbsp;EXUU</p>
                </van-col> -->
              </van-row>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { coinMmoney } from './../utils/api';
import { dateFormat } from 'vux';
let _this;
export default {
  data() {
    return {
      isLoading: false,
      current:1,
      total: 0,
      size: 10,
      finished: false,
      loading: false,
      listLength:0,
      list:[]
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    onRefresh() {
      this.getList();
      setTimeout(() => {
        this.$toast({
          duration: 800,
          message: this.$t('record.v7')
        });
        this.isLoading = false;
      }, 500);
    },
    getList() {
      coinMmoney.getCoinManagementList({
        current: this.current,
        size: this.size
      }).then(res => {
        this.total = res.data.total;
        this.list = res.data.records;
        this.listLength = res.data.records.length;
      })
    },
    onLoad() {
      this.getList();
      setTimeout(() => {
        if(this.total > this.listLength) {
          this.size += 10;
          this.loading = false;
        } else {
          // 加载状态结束
          this.finished = true;
          this.loading = false;
        }
      }, 500);
    },
    contain(item){
      this.$router.push({
        path: '/records',
        query:{coinManagementId:item.id}
      })
    }
  },
  filters: {
    dateFormat
  }
};
</script>

<style lang="less" scoped>
.cf {
  zoom: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.pr {
  position: relative;
}
.cf:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.head {
  background: #fff;
  color: #333;
}
.head .return:after {
  border-color: #333;
}
.head .operating /deep/ i {
  vertical-align: middle;
}
.operating {
  color: #333;
}
.overlay {
  background: #f5f5f5;
  overflow-y: scroll;
}
.recordWrap {
  padding: 0px 15px 10px;
  .recordItem {
    background: #fff;
    border-radius: 5px;
    margin-top: 15px;
    .tit {
      padding: 10px 15px;
      font-size: 14px;
      color: #666;
      border-bottom: 1px solid #ededed;
      .class1{
        color:red
      }
      .class2{
        color:#3fb776
      }
    }
    .title {
      text-align: center;
      p:nth-child(1) {
        padding: 25px 0 15px;
        font-size: 13px;
        color: #999;
      }
      p:nth-child(2) {
        padding-bottom: 35px;
        color: #333;
      }
    }
  }
}
</style>
